<template>
  <Form
    ref="formValidate"
    :model="formValidate"
    :rules="ruleValidate"
    :label-width="90"
  >
    <Row justify="space-between">
      <Col span="10">
        <FormItem label="订单号" prop="oid">
          <Input
            v-model="formValidate.oid"
            placeholder="输入订单"
            disabled
          ></Input>
        </FormItem>
      </Col>
      <Col span="10">
        <FormItem label="选择顾客" prop="cuid">
          <Select
            v-model="formValidate.cuid"
            clearable
            filterable
            placeholder="选择顾客"
          >
            <Option
              v-for="item in cuids"
              :value="item.value"
              :key="item.value"
              >{{ item.key }}</Option
            >
          </Select>
        </FormItem>
      </Col>
    </Row>
    <Row justify="space-between">
      <Col span="10">
        <FormItem label="支付方式" prop="payway">
          <Select
            v-model="formValidate.payway"
            placeholder="Select your payway"
          >
            <Option value="现金">现金</Option>
            <Option value="转账">转账</Option>
            <Option value="支票">支票</Option>
          </Select>
        </FormItem>
      </Col>
      <Col span="10">
        <FormItem label="支付时间">
          <Row>
            <Col span="11">
              <FormItem prop="paytime">
                <DatePicker
                  type="date"
                  placeholder="Select date"
                  v-model="formValidate.paytime"
                ></DatePicker>
              </FormItem>
            </Col>
          </Row>
        </FormItem>
      </Col>
    </Row>
    <Row justify="space-between">
      <Col span="10">
        <FormItem label="地址" prop="address">
          <Cascader
            :data="dataregion"
            v-model="formValidate.address"
            filterable
            placeholder="请选择地址"
            @on-change="ccid"
          ></Cascader>
        </FormItem>
      </Col>
      <Col span="10">
        <FormItem label="支付状态" prop="paystatus">
          <RadioGroup v-model="formValidate.paystatus">
            <Radio label="已支付">已支付</Radio>
            <Radio label="未支付">未支付</Radio>
          </RadioGroup>
        </FormItem>
      </Col>
    </Row>
    <Divider>产品</Divider>
    <FormItem prop="cid">
      <Row justify="space-between">
        <Col span="2">
          <span
            >葵花:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.A000"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >花生:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.B001"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >莲藕:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.A002"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >玉米:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.A003"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >黄豆:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.C004"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >山药:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.C005"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >小麦:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.C006"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >高粱:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.A007"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >绿豆:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.C008"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >棉花:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.B009"
            ></InputNumber
          ></span>
        </Col>
        <Col span="2">
          <span
            >大米:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.A006"
            ></InputNumber
          ></span>
        </Col>
         <Col span="2">
          <span
            >大蒜:<InputNumber
              :max="100"
              :min="1"
              v-model="formValidate.every.A008"
            ></InputNumber
          ></span>
        </Col>
      </Row>
    </FormItem>
    <Divider />
    <FormItem label="备注" prop="desc">
      <Input
        v-model="formValidate.desc"
        type="textarea"
        :autosize="{ minRows: 0, maxRows: 5 }"
        placeholder="Enter something..."
      ></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
      <Button @click="handleReset('formValidate')" style="margin-left: 8px"
        >重置</Button
      >
    </FormItem>
  </Form>
</template>
<script>
export default {
  data() {
    return {
      value1: 0,
      crops: {},
      dataregion: [],
      cuids: [],
      formValidate: {
        oid: "",
        address: [],
        cuid: "",
        payway: "",
        paytime: "",
        paystatus: "",
        desc: "",
        every: {
          A000: 0,
          B001: 0,
          A002: 0,
          A003: 0,
          C004: 0,
          C005: 0,
          C006: 0,
          A007: 0,
          C008: 0,
          B009: 0,
          A006: 0,
          A008: 0,
        },
      },
      ruleValidate: {
        oid: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur",
          },
        ],
        cuid: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            type: "array",
            message: "输入地址",
            trigger: "blur",
          },
        ],
        payway: [
          { required: true, message: "选择支付方式", trigger: "change" },
        ],
        paystatus: [
          { required: true, message: "选择支付状态", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.axios
      .get("/api/region")
      .then((r) => {
        this.dataregion = r.data;
      })
      .catch((E) => {
        this.$Message.error("e" + E);
      });

    var param = JSON.stringify({ action: "cuid" });
    this.axios
      .get("/api/ss", { params: { param: param } })
      .then((r) => {
        this.cuids = r.data;
      })
      .catch((e) => {
        this.$Message.error("E" + e);
      });
  },
  methods: {
    ct(){
      this.axios.post("/api/cd",{oid:this.formValidate.oid}).then(()=>{
        console.log("催单成功")
      }).catch((e)=>{
        this.$Message.error("e"+e)
      })
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          //   this.$Message.success("Success!");
          var ad = this.formValidate.address;
          var addr = ad[0] + "-" + ad[1] + "-" + ad[2];
          var to_tornado = JSON.parse(JSON.stringify(this.formValidate));
          to_tornado.address = addr;
          this.axios
            .post("/api/orders", to_tornado)
            .then((r) => {
              this.$Message.info(r.data);
            })
            .catch((e) => {
              this.$Message.error("e" + e);
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    ccid(value) {
      var to_create = {
        ctype: "ccid",
        city: value[0].substring(0, 2),
        type: "",
      };
      this.axios
        .post("/api/create", to_create)
        .then((r) => {
          this.formValidate.oid = r.data;
        })
        .catch((e) => {
          this.$Message.error("e" + e);
        });
    },
  },
};
</script>
